<template>
	<div class="album-connect-table">
		<el-dialog :title="title" :visible.sync="visible" width="900px" @close="closeDialog">
			<el-row class="search-bar">
				<el-col :span="4" style="margin-right:20px">
					<slot></slot>
				</el-col>
				<el-col :span="8">
					<el-input :placeholder="placeholder" v-model="keyword" @keyup.enter.native="searchTable">
						<i slot="suffix" class="el-input__icon el-icon-search" @click="searchTable"></i>
					</el-input>
				</el-col>
			</el-row>
			<el-row class="table-row">
				<template>
					<el-table border tooltip-effect="dark" highlight-current-row :data="tableData.data" @selection-change="videoCheck" style="width: 100%">
						<el-table-column type="selection" align="center" width="45"></el-table-column>
						<el-table-column v-for="(item, index) of column" :key="index" :prop="item.prop" :label="item.label" :width="item.width" align="center" show-overflow-tooltip></el-table-column>
					</el-table>
				</template>
				<el-pagination background @current-change="changePage" :current-page="page_index" :page-size="page_size" :total="total_number" layout="prev, pager, next"></el-pagination>
			</el-row>
			<span slot="footer" class="dialog-footer">
				<el-button @click="visible = false">取 消</el-button>
				<el-button type="primary" @click="submit">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
export default {
	components: {},
	model: {
		prop: 'value'
	},
	props: {
		title: {
			required: true,
			type: String,
			default: ''
		},
		tab: {
			required: true,
			type: String,
			default: '1'
		},
		placeholder: {
			required: false,
			type: String,
			default: '请输入关键字'
		},
		tableData: {
			required: true,
			type: Object,
			default () {
				return {};
			}
		},
		column: {
			required: true,
			type: Array,
			default () {
				return [];
			}
		},
		getData: Function
	},
	data() {
		return {
			keyword: '',
			page_index: 1,
			page_size: 10,
			total_number: 0,
			visible: false,
			checked: []
		};
	},
	created() {
		// this.checked = [];
	},
	mounted() {},
	watch: {
		tableData: {
			handler(newVal, oldVal) {
				this.page_index = +newVal.page_index;
				this.total_number = newVal.data_sum;
			},
			deep: true
		}
	},
	methods: {
		videoCheck(val) {
			this.checked = val;
			this.checked.forEach((item, index) => {
				this.$set(item, 'tab', this.tab)
			})
		},
		changePage(val) {
			this.page_index = val;
			this.$parent.page = val;
			this.getData();
		},
		searchTable() {
			this.$parent.keyword = this.keyword;
			this.getData();
		},
		closeDialog() {

			this.keyword = '';
			this.$parent.keyword = '';
		},
		submit() {
			this.visible = false;
			this.$emit('input', this.checked);

		}
	}
};

</script>
<style lang="scss">
.album-connect-table {
	.table-row {
		padding-top: 20px;
		.el-pagination {
			margin-top: 20px;
		}
	}
}

</style>
